<template>
  <div :class="className" :style="{'height':'666px','width':'100%'}" />
</template>

<script>
  import * as echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import 'echarts/extension/bmap/bmap';
  import resize from '../../views/dashboard/mixins/resize';
  const animationDuration = 1000
  const bData = [
    { name: '海门', value: 250 },
    { name: '鄂尔多斯', value: 12 },
    { name: '招远', value: 120 },
    { name: '舟山', value: 12 },
    { name: '齐齐哈尔', value: 14 },
    { name: '盐城', value: 15 },
    { name: '赤峰', value: 16 },
    { name: '青岛', value: 18 },
    { name: '乳山', value: 18 },
    { name: '金昌', value: 190 },
  ]
  const geoCoordMap = {
    '海门': [121.15, 31.89],
    '鄂尔多斯': [109.781327, 39.608266],
    '招远': [120.38, 37.35],
    '舟山': [122.207216, 29.985295],
    '齐齐哈尔': [123.97, 47.33],
    '盐城': [120.13, 33.38],
    '赤峰': [118.87, 42.28],
    '青岛': [120.33, 36.07],
    '乳山': [121.52, 36.89],
    '金昌': [102.188043, 38.520089],
  }
  const convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
        res.push({
          name: data[i].name,
          value: geoCoord.concat(data[i].value)
        });
      }
    }
    return res;
  };
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '500px'
      },
      chartData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        chart: null,
        center:[104.114129,37.550339],
        bmap:null
      }
    },
    mounted() {
      this.initChart();
      setTimeout(()=>{
        this.initChart();
      },500)
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el,{"renderer":"svg"})
        this.setOption(this.chartData);
        this.bmap = this.chart.getModel().getComponent('bmap').getBMap();
        this.bmap.addEventListener("zoomend",()=>{
          var bssw = this.bmap.getBounds().getSouthWest();   //可视区域左下角
          var bsne = this.bmap.getBounds().getNorthEast();   //可视区域右上角
          var bounds = this.bmap.getBounds();   //可视区域右上角
          console.log('可视区域左下角',this.bmap.getBounds().getSouthWest())
          console.log('可视区域右上角',this.bmap.getBounds().getNorthEast())
          console.log(("当前地图可视范围是：" + bssw.lng + "," + bssw.lat + "到" + bsne.lng + "," + bsne.lat));
          console.log(bounds)
      })
      },
      setOption({data}={}){
        this.chart.setOption({
          backgroundColor: 'transparent',
          title: {
            text: '',
            subtext: '',
            sublink: '',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          bmap: {
            center:this.center,
            zoom: 5,
            roam: true,
            mapStyleV2: {
              "styleId":"f3b694d310a26eb5e9f3c3d69bbe4f03",
              // styleJson: [
              //   {
              //     featureType: 'water',
              //     elementType: 'all',
              //     stylers: {
              //       color: '#000E22'
              //     }
              //   },
              //   {
              //     featureType: 'land',
              //     elementType: 'all',
              //     stylers: {
              //       color: '#086C86'
              //     }
              //   },
              //   {
              //     featureType: 'railway',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'highway',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'highway',
              //     elementType: 'labels',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'arterial',
              //     elementType: 'geometry',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'arterial',
              //     elementType: 'geometry.fill',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'poi',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'green',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'subway',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'manmade',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'local',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'arterial',
              //     elementType: 'labels',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'boundary',
              //     elementType: 'all',
              //     stylers: {
              //       color: '#fefefe'
              //     }
              //   },
              //   {
              //     featureType: 'building',
              //     elementType: 'all',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   },
              //   {
              //     featureType: 'label',
              //     elementType: 'labels.text.fill',
              //     stylers: {
              //       visibility: 'off'
              //     }
              //   }
              // ]
            },
            mapOptions: {
              // 禁用百度地图自带的底图可点功能
              enableMapClick: false
            }
          },
          series: [
            {
              type: 'scatter',
              coordinateSystem: 'bmap',
              data: convertData(bData),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              encode: {
                value: 2
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                label: {
                  show: true
                }
              }
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'bmap',
              data: convertData(
                bData
                  .sort(function (a, b) {
                    return b.value - a.value;
                  })
                  .slice(0, 6)
              ),
              symbolSize: function (val) {
                return val[2] / 10;
              },
              encode: {
                value: 2
              },
              showEffectOn: 'render',
              rippleEffect: {
                brushType: 'stroke'
              },
              label: {
                formatter: '{b}',
                position: 'right',
                show: true
              },
              itemStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              },
              emphasis: {
                scale: true
              },
              zlevel: 1
            },
          ]
        })
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.setOption(val)
        }
      }
    },
  }
</script>

<style type="text/css">
    .anchorBL{
        display:none
    }
</style>
